<template>
  <div v-loading="loading">
    <el-card :body-style="{padding:'10px'}" style="min-height: 680px;">
      <el-row :gutter="24">
        <el-col :span="21">
          <el-button type="info" @click="reset">新建</el-button>
          <el-button type="success" @click="saveEdit">保存</el-button>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <el-card>
        <el-descriptions border style="margin-bottom: 5px">
          <el-descriptions-item label="模板类型" label-style="width:8%" content-style="width:20%">
            {{ form.mold }}
          </el-descriptions-item>
          <el-descriptions-item label="模板名称" label-style="width:8%" content-style="width:20%">
            {{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item label="版本" label-style="width:8%" content-style="width:23%">
            <el-select v-model="form.version" placeholder="请选择" @change="selVersion">
              <el-option
                v-for="item in formworkList"
                :key="item.id"
                :label="item.version"
                :value="item.id"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="备注" label-style="width:8%" content-style="width:23%">
            {{ form.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <editor v-model="form.content" api-key="12nm2w9l6vjqdm7f8xivkt8l3kfcsgw8nuydvlunm62rpnhd" :init="editConfig" />
      </el-card>
    </el-card>
  </div>
</template>

<script>import Editor from '@tinymce/tinymce-vue'
import { save } from '@/api/report'
import { get } from '@/api/report'
import { getFormworkByMold } from '@/api/formwork'
import { getNext } from '@/api/report'
import { getLast } from '@/api/report'
export default {
  components: {
    'editor': Editor
  },
  data() {
    return {
      loading: false,
      form: { },
      formworkList: [],
      rules: {
        name: [
          { required: true, message: '名称不能为空' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '版本号不能为空' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      },
      editConfig: {
        height: 630, // 富文本高度
        language_url: '/tinymce/zh_CN.js', // 中文包
        language: 'zh_CN', // 中文
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: true, // 禁用编辑器底部的状态栏
        statusbar: true, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 是否允许粘贴图像
        menubar: true, // 隐藏最上方menu
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
        file_picker_types: 'image',
        images_upload_credentials: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: function(blobInfo, success, failure) {
          const formdata = new FormData()
          formdata.append('file', blobInfo.blob())
          // 上传图片接口，跟后端同事协调上传图片
          // http://hh.xxxx.cn/admin/upload为上传图片接口
        }
      }
    }
  },
  created() {
    if (this.$route.name === 'ipqcjyReportEdit') {
      this.form.mold = 'IPQC检验'
    } else if (this.$route.name === 'ipqcxjReportEdit') {
      this.form.mold = 'IPQC巡验'
    } else if (this.$route.name === 'produceReportEdit') {
      this.form.mold = '产品检验'
    } else if (this.$route.name === 'oldproduceReportEdit') {
      this.form.mold = '产品老化'
    } else if (this.$route.name === 'produceoutReportEdit') {
      this.form.mold = '产品出厂'
    } else if (this.$route.name === 'customerReportEdit') {
      this.form.mold = '顾客投诉'
    } else if (this.$route.name === 'pphandleReportEdit') {
      this.form.mold = 'PP每日维修'
    } else if (this.$route.name === 'ppfirstReportEdit') {
      this.form.mold = 'PP组装首检'
    }
    this.getFormwork()
    if (this.$route.query.id) { this.getReport(this.$route.query.id) }
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getReport(id) {
      this.loading = true
      get(id).then(res => {
        this.loading = false
        this.form = res.data.data
        this.$forceUpdate()
      })
    },
    reset() {
      this.$router.push({})
      this.form.id = null
      for (const item of this.formworkList) {
        if (item.id === this.form.version) {
          this.form.name = item.name
          this.form.version = item.version
          this.form.remark = item.remark
          this.form.content = item.content
          break
        }
      }
      this.$forceUpdate()
    },
    getFormwork() {
      this.loading = true
      getFormworkByMold(this.form.mold).then(res => {
        this.loading = false
        this.formworkList = res.data.data
        if (this.formworkList.length > 0) {
          const item = this.formworkList[0]
          this.form.name = item.name
          this.form.version = item.version
          this.form.remark = item.remark
          this.form.content = item.content
        }
      })
    },
    selVersion(e) {
      for (const item of this.formworkList) {
        if (item.id === e) {
          this.form.name = item.name
          this.form.version = item.version
          this.form.remark = item.remark
          this.form.content = item.content
          break
        }
      }
      this.$forceUpdate()
    },
    toNext() {
      getNext(this.$route.query.id, this.form.mold).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getReport(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id, this.form.mold).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getReport(this.$route.query.id)
        }
      })
    },
    saveEdit() {
      save(this.form).then(res => {
        this.loading = false
        this.$message.success(res.message)
        this.editVisible = false
        this.$router.push({ query: { id: res.data.data.id }})
        if (this.$route.query.id) {
          this.getFormwork(this.$route.query.id, this.form.mold)
        }
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

